<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery选择器</title>
</head>
<body>
    <div id="root">
        <p class="a">家用电器</p>
        <p name="b">日用百货</p>
        <ul>
            <li>one</li>
            <li class="a">two</li>
            <li>three</li>
            <li name="b">four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li class="a">nine</li>
            <li>ten</li>
        </ul>
        <p class="a">数码产品</p>
        <p>电子产品</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //选择器的作用是：根据特点的字符串规则获取dom元素。

        //全局选择器
        $('*').css('font-size','20px')
        //id选择器
        $('#root').css({border:'1px solid black',margin:'0 auto',width:'1000px'})
        //类选择器
        $('.a').css('color','red')
        //标签选择器
        $('p').css('text-decoration', 'underline')

        //层级选择器
        //子选择器
        $('#root>.a').css('text-align','center')
        //后代选择器
        $('#root .a').css('background','green')

        //结构伪类选择器
        $('ul>li:odd').css('text-align','right')
        $('ul>li:even').css('text-align','left')

        //属性选择器
        $('p[name="b"]').css('color','orange')

        //总结：jquery选择器的语法就是css选择器的语法
        
    </script>
</body>
</html>